<template>
  <div style="display: flex">
    <div class="left" style="width: 20%">
      <el-tree style="margin-top: 10px"
               :data="dataTree"
               ref="treeRef"
               highlight-current
               accordion
               :render-content="renderContent"
               :props="defaultProps"
               default-expand-all
               node-key="id"
               @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="right" style="width: 80%;">
      <el-table :data="cameraData" height="calc(100vh - 250px)"
                v-loading="loading"
                border stripe :cell-style="{ 'textAlign': 'center' }"
                :header-cell-style="{  'fontSize': '14px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }">
        <el-table-column prop="serialNumber" label="摄像头编号"></el-table-column>
        <el-table-column prop="videoUrl" label="摄像头地址" show-overflow-tooltip></el-table-column>
        <el-table-column label="是否在线">
          <template v-slot:default="scope"><span
              :style="{color: scope.row.videoUrl? '#1E90FF' : '#FF8C00',}" style="font-size: 13px">
            {{
              scope.row.videoUrl ? '在线' : '不在线'
            }}
          </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-link v-if="scope.row.videoUrl" style="color: #66b1ff;text-decoration: underline"
                     @click="intoCamera(scope.row)">进入摄像头
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <open-cctv ref="cctv"></open-cctv>
  </div>
</template>

<script>
import openCctv from "./componentDialog/openCctv.vue";

export default {
  name: "warehouseCamera",
  meta: {title: "仓库摄像头", icon: "el-icon-receiving", authorityList: 2100, sort: 3},
  components: {
    openCctv
  },
  data() {
    return {
      dataTree: [
        {
          label: "仓库列表",
          icon: "el-icon-basketball",
          children: []
        },
      ],
      cameraData: [],
      loading: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },
  created() {
    this.$api.cameraGetAreaCameraList().then(res => {
      res.map(a => {
        a.label = a.areaName
        a.id = a.areaId
        a.icon = 'el-icon-place'
      })
      this.dataTree[0].children = res
      // 默认选中第一个节点
      this.$nextTick(() => {
        if (res.length) {
          const firstId = res[0].areaId
          this.$refs.treeRef.setCurrentKey(firstId)
          this.handleNodeClick(res[0]) // 如果有点击事件逻辑
        }
      })
    })
  },
  methods: {
    renderContent(h, {node, data, store}) {
      return h('span', {class: 'custom-tree-node'}, [
        h('i', {class: data.icon, style: {marginRight: '6px'}}),
        h('span', data.label)
      ])
    },
    handleNodeClick(val) {
      this.loading = true
      this.areaId = val.areaId
      this.getList(val.areaId)
    },
    getList(el) {
      this.$api.cameraGetAreaAllCamera({areaId: el}).then(res => {
        this.cameraData = res
        this.loading = false
      })
    },
    intoCamera(row) {
      this.$api.firmCameraGetLiveAddress({serialNumber: row.serialNumber, type: 1}).then(res => {
        this.$refs.cctv.init(res, row.serialNumber);
      });
    }
  }
}
</script>

<style scoped>

</style>